<template>
  <div class="question-page">
    <div
      v-for="question in questions"
      :key="question.id"
      class="question-container"
      :class="{ disabled: question && question.order > currentMinOrder }"
    >
      <p class="question-text">{{ question ? question.text : '' }}</p>

      <div class="options-container">
        <div
          v-for="option in options"
          :key="option.value"
          class="option"
          :class="{
            selected: question && question.answerValue === option.value,
            disabled: !question || question.order > currentMinOrder
          }"
          @click="selectOption(question, option.value)"
        >
          <span class="option-label">{{ option.label }}</span>
        </div>
      </div>
    </div>

    <div class="navigation">
      <button
        class="btn btn-prev"
        :disabled="currentPage === 1"
        @click="$emit('navigate', 'prev')"
      >
        上一页
      </button>

      <button
        v-if="currentPage < totalPages"
        class="btn btn-next"
        :disabled="!allQuestionsAnswered"
        @click="$emit('navigate', 'next')"
      >
        下一页
      </button>

      <button
        v-else
        class="btn btn-complete"
        :disabled="!allQuestionsAnswered"
        @click="completeTest"
      >
        完成测试
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QuestionPage',
  props: {
    questions: {
      type: Array,
      default: () => []
    },
    currentPage: Number,
    totalPages: Number
  },
  data() {
    return {
      options: [
        { value: 3, label: '强烈同意' },
        { value: 2, label: '同意' },
        { value: 1, label: '有点同意' },
        { value: 0, label: '中立' },
        { value: -1, label: '有点不同意' },
        { value: -2, label: '不同意' },
        { value: -3, label: '强烈不同意' }
      ],
      currentMinOrder: 1
    }
  },
  computed: {
    allQuestionsAnswered() {
      return this.questions.every(q => q && q.answered)
    }
  },
  watch: {
    questions: {
      handler(newQuestions) {
        if (!newQuestions || newQuestions.length === 0) {
          this.currentMinOrder = 1
          return
        }

        // 找到第一个未回答的题目
        const firstUnanswered = newQuestions.find(q => q && !q.answered)
        if (firstUnanswered) {
          this.currentMinOrder = firstUnanswered.order
        } else {
          // 所有题目都已回答
          const lastQuestion = newQuestions[newQuestions.length - 1]
          this.currentMinOrder = lastQuestion ? lastQuestion.order + 1 : 1
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    selectOption(question, value) {
      if (!question || question.order > this.currentMinOrder) {
        return
      }

      // 在 Vue 3 中直接赋值即可
      question.answerValue = value
      question.answered = true

      // 通知父组件
      this.$emit('answer-selected', question.id, value)
    },

    completeTest() {
      this.$emit('complete-test')
    }
  }
}
</script>

<style scoped>
.question-page {
  margin-top: 20px;
}

.question-container {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.question-container.disabled {
  opacity: 0.6;
  pointer-events: none;
}

.question-text {
  font-size: 18px;
  margin-bottom: 15px;
  font-weight: 500;
  line-height: 1.5;
}

/* 选项容器样式 - 确保按钮在同一行 */
.options-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap; /* 禁止换行 */
  overflow-x: auto; /* 如果内容超出容器宽度，允许横向滚动 */
  gap: 5px; /* 选项之间的间距 */
  padding: 5px 0;
}

/* 隐藏滚动条（可选） */
.options-container::-webkit-scrollbar {
  display: none;
}

.options-container {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.option {
  flex: 1; /* 每个选项平均分配空间 */
  min-width: 80px; /* 最小宽度确保文本不会过于拥挤 */
  max-width: 120px; /* 最大宽度限制 */
  padding: 10px 5px;
  text-align: center;
  border: 2px solid #e0e0e0;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden;
  text-overflow: ellipsis;
}

.option:hover {
  border-color: #3498db;
  background-color: #f8f9fa;
}

.option.selected {
  border-color: #3498db;
  background-color: #3498db;
  color: white;
}

.option.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.option-label {
  font-size: 14px;
  display: block;
}

.navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  min-width: 100px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-prev {
  background-color: #95a5a6;
  color: white;
}

.btn-prev:not(:disabled):hover {
  background-color: #7f8c8d;
}

.btn-next, .btn-complete {
  background-color: #3498db;
  color: white;
}

.btn-next:not(:disabled):hover, .btn-complete:not(:disabled):hover {
  background-color: #2980b9;
}

.btn-complete {
  background-color: #27ae60;
}

.btn-complete:not(:disabled):hover {
  background-color: #219a52;
}

/* 响应式设计 - 在小屏幕上调整选项布局 */
@media (max-width: 768px) {
  .options-container {
    gap: 3px;
  }

  .option {
    min-width: 70px;
    padding: 8px 3px;
  }

  .option-label {
    font-size: 12px;
  }

  .btn {
    padding: 8px 15px;
    font-size: 14px;
    min-width: 80px;
  }
}

@media (max-width: 480px) {
  .option {
    min-width: 60px;
    padding: 6px 2px;
  }

  .option-label {
    font-size: 11px;
  }
}
</style>
